<template>
    <a-layout class="logincontent">
        <div class="titleText">在线学习平台后台登录</div>
        <br><br>
        <div class="layout">
            <el-tabs type="border-card">
                <el-tab-pane label="管理登录">
                    <el-form label-position="right"
                             label-width="65px"
                             style="max-width: 460px"
                             class="loginForm"
                             ref="loginFormRef"
                             :model="userFormNormal"
                             :rules="rulesLogin"

                    >
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="userFormNormal.username"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="userFormNormal.password"/>
                        </el-form-item>

                        <el-button
                                type="primary"
                                class="loginBtn"
                                @click="loginByUser"
                        >
                            登录
                        </el-button>
                    </el-form>
                </el-tab-pane>

            </el-tabs>
        </div>

    </a-layout>
</template>
<script setup>
    import {reactive, ref} from "vue";
    import {adminLogin} from "@/api/admin";
    import router from "@/router";
    import {useStore} from "vuex"


    const userFormNormal = reactive({username: "", password: ""});
    const rulesLogin = reactive({
        username: [
            {required: true, message: '请填写用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '用户名长度3-10个字符', trigger: 'blur'},
        ],
        password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度3-10个字符', trigger: 'blur'},
        ]
    });
    const loginFormRef = ref();
    const store = useStore();
    const loginByUser =()=> {
        loginFormRef.value.validate((valid) => {
            if (valid){
                adminLogin(userFormNormal).then((res)=>{
                    // console.log(userFormNormal)
                    // let user = res.data;
                    // store.commit("saveUser",user);
                    // router.push({path:"/"});
                    // store.commit("setAdminStatus",true);
                    // console.log(res.data);
                    //本地记录验证头信息
                    store.commit("setAdminStatus",true);
                    router.push({path:"/adminMine/adminHome"})
                })
            }
        })
    }

</script>
<style>
    .layout {
        /*position: absolute;*/
        left: calc(50% - 200px);
        top: 20%;
        width: 450px;
        font-family: "等线 Light";
        font-weight: 600;
        box-shadow: 4px 4px 15px #000000;

    }

    .logincontent {
        display: flex;
        background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
        background-size: 100% 100%;
        background-attachment: fixed;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }

    .titleText {
        font-size: 45px;
        color: antiquewhite;
    }

</style>